<!--
 * @Author: zhouwr 1551541860@qq.com
 * @Date: 2024-02-17 20:41:53
 * @LastEditors: zhouwr 1551541860@qq.com
 * @LastEditTime: 2024-02-28 23:25:41
 * @FilePath: /jeecgboot-vue3/src/views/activiti/procdef/components/ActProcessDefResourceModal.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <BasicModal destroyOnClose title="流程资源" v-bind="$attrs" width="800px" @register="registerModal" style="display: inline-block">
    <!--<p class="h-20" v-for="index in 20" :key="index"> 根据屏幕高度自适应 </p>-->
    <a-tabs v-model:activeKey="activeKey">
      <a-tab-pane key="1" tab="流程图">
        <div ref="containerEl" class="bpmn-container"></div>
      </a-tab-pane>
      <a-tab-pane key="2" tab="XML">
        <CodeEditor v-model:value="processResourceXml" :mode="modeValue" :readonly="true" />
      </a-tab-pane>
    </a-tabs>
  </BasicModal>
</template>
<script lang="ts" setup>
  import { ref } from 'vue'
  import { BasicModal, useModalInner } from '/@/components/Modal'
  import { getActResourceSvg, getActResourceXml } from '../ActProcessDef.api'
  import { CodeEditor } from '/@/components/CodeEditor'

  import BpmnViewer from 'bpmn-js/lib/Viewer'
  import ModelingModule from 'bpmn-js/lib/features/modeling'
  import MoveCanvasModule from 'diagram-js/lib/navigation/movecanvas'

  const activeKey = ref<string>('-1')
  const processResourceSvg = ref<string>('')
  const processResourceXml = ref<string>('')
  const modeValue = ref<string>('htmlmixed')

  const [registerModal, { setModalProps }] = useModalInner(async (data) => {
    console.log('useModalInner', data)
    getActResourceSvg({ procDefId: data.processDefId }).then((flowchart) => {
      processResourceSvg.value = flowchart
      activeKey.value = '1'
    })

    getActResourceXml({ procDefId: data.processDefId }).then(async (xml) => {
      processResourceXml.value = xml
      await bpmnImport(xml)
    })

    setModalProps({
      confirmLoading: false,
      showCancelBtn: true,
      showOkBtn: false,
      defaultFullscreen: false,
    })
  })

  const containerEl = ref<HTMLElement>()
  const bpmnViewer: any = ref<BpmnViewer>()

  /**
   * 初始化bpmnjs并导入流程xml
   * @param bpmnXML 流程xml
   */
  async function bpmnImport(bpmnXML: string) {
    bpmnViewer.value = new BpmnViewer({
      container: containerEl.value,
      // height: 540, // 根据实际情况设置高度，宽度的话设置父元素的宽度就可以，会自适应的
      additionalModules: [
        ModelingModule, // 基础工具 MoveModule、SetColor 等依赖于此
        MoveCanvasModule, // 移动整个画布
      ],
    })
    console.log('>>>>>', bpmnViewer)
    const result = await bpmnViewer.value.importXML(bpmnXML)
    const { warnings } = result
    if (warnings.length > 0) {
      console.error('>>>>> bpmn导入流程xml出错', warnings)
    }

    const canvas = bpmnViewer.value.get('canvas')
    // 调整在正中间
    canvas.zoom('fit-viewport', 'auto')

    // const overlays = bpmnViewer.value.get('overlays')
    // const elementRegistry = bpmnViewer.value.get('elementRegistry')
    // const shape = elementRegistry.get('sid-DF030208-F8F4-4BA2-8D32-EA038C20DE0E')

    // let $overlayHtml = document.createElement('div')
    // $overlayHtml.style.width = shape.width
    // $overlayHtml.style.height = shape.height

    // overlays.add('sid-DF030208-F8F4-4BA2-8D32-EA038C20DE0E', {
    //   position: {
    //     top: 0,
    //     left: 0,
    //   },
    //   html: $overlayHtml,
    // })

    const elementIds = bpmnViewer.value._definitions.rootElements[0]?.flowElements.map((element) => {
      // console.log(element.id)
      return element.id
    })

    // Activity_0c2cl2b为节点元素的ID
    setNodeColor(elementIds, 'nodeSuccess', canvas)
  }

  // 设置高亮颜色的class
  function setNodeColor(nodeCodes, colorClass, canvas) {
    for (let i = 0; i < nodeCodes.length; i++) {
      canvas.addMarker(nodeCodes[i], colorClass)
    }
  }
</script>

<style lang="less">
  .bpmn-container {
    position: relative;
    height: 100%;
  }

  /deep/ .ant-modal-content {
    position: relative !important;
    display: inline-block !important;
  }

  .canvas {
    width: 100%;
    height: 100%;
  }

  .djs-visual {
    fill: none !important;
    stroke-width: none !important;
  }

  .nodeSuccess .djs-visual > :nth-child(1) {
    stroke: green !important;
    fill: rgba(0, 80, 0, 0.2) !important;
    stroke-width: 2px;
  }

  .bjs-powered-by {
    display: none !important;
  }
</style>
